<template>
  <div>
    <div class="filter-container">
      <el-input @keyup.enter.native="handleFilter" clearable="" size="small"  style="width: 200px;" class="filter-item" placeholder="商品名称" v-model="params.goodsTitle"></el-input>
      <el-input @keyup.enter.native="handleFilter"  clearable size="small"  style="width: 200px;" class="filter-item" placeholder="商品编码" v-model="params.goodsNo"></el-input>
      <!-- <el-select v-model="params.goodsStatus" clearable placeholder="商品状态" size="small" >
        <el-option v-for="(item,index) in goodsStatusData()" :key="index" :label="item" :value="index">
        </el-option>
      </el-select> -->
      <el-select v-model="params.paymentType" clearable placeholder="支付方式" size="small" >
          <el-option v-for="(item,index) in paymentTypes" :key="index" :label="item" :value="index">
          </el-option>
      </el-select>
      <category-cascader :clearable="true" v-model="params.categoryPath"></category-cascader>
    <br>
    <br>
    <el-button class="filter-item" size="small"  type="primary" v-waves icon="el-icon-search" @click="handleFilter">搜索</el-button>
    <el-button class="filter-item" type="primary" size="small"  v-waves icon="el-icon-plus" @click="importSelected">导入所选</el-button>
    <!-- <el-button class="filter-item" type="primary" size="small"  v-waves icon="el-icon-plus" @click="importAll">全部导入</el-button> -->
    </div>
    <el-table :data="list"  height="550"
    @selection-change="handleSelectionChange"
  @sort-change="sortChange" v-loading="listLoading" element-loading-text="给我一点时间" border fit highlight-current-row
      style="width: 100%">
        <el-table-column
    align="center"
      type="selection"
      width="55">
    </el-table-column>

      <el-table-column prop="stock" align="center" label="导入库存" width="140" v-if="selectStock" fixed="left">
        <template slot-scope="scope">
          <el-input-number size="mini" :min="1" v-model="scope.row.importStock" style="width:100px;"></el-input-number>
        </template>
      </el-table-column>

      <el-table-column prop="cover" align="center" label="封面" width="140" fixed="left">
        <template slot-scope="scope">
          <img :src="scope.row.cover|absUrl" alt="" class="avatar">
        </template>
      </el-table-column>

      <el-table-column prop="goodsNo" align="center" label="商品编号" width="90" fixed="left">
        <template slot-scope="scope">
          <span>{{scope.row.goodsNo}}</span>
        </template>
      </el-table-column>

      <el-table-column prop="title" align="center" label="商品名称" width="160" fixed="left">
        <template slot-scope="scope">
          <span>{{scope.row.title}}</span>
          <div class="sale-props">{{saleProps(scope.row.saleProps)}}</div>
        </template>
      </el-table-column>

      <el-table-column prop="categoryId" align="center" label="类别名称" width="100">
        <template slot-scope="scope">
          <span>{{scope.row.goodsCategoryName}}</span>
        </template>
      </el-table-column>

      <el-table-column prop="marketPrice" align="center" label="市场价" width="80">
        <template slot-scope="scope">
          <span>{{scope.row.marketPrice}}</span>
        </template>
      </el-table-column>

      <el-table-column prop="price" align="center" label="微信价" width="80">
        <template slot-scope="scope">
          <span>{{scope.row.price}}</span>
        </template>
      </el-table-column>

      <el-table-column prop="points" align="center" label="积分价" width="80">
        <template slot-scope="scope">
          <span>{{scope.row.points}}</span>
        </template>
      </el-table-column>

      <!-- <el-table-column prop="tagIds" align="center" label="商品标签" width="100">
        <template slot-scope="scope">
          <span>{{scope.row.tagName}}</span>
        </template>
      </el-table-column> -->

      <el-table-column prop="brandId" align="center" label="品牌" width="100">
        <template slot-scope="scope">
          <span>{{scope.row.brandName}}</span>
        </template>
      </el-table-column>
      <el-table-column prop="status" align="center" label="商品状态" width="100">
        <template slot-scope="scope">
          <el-tag :type="scope.row.status|tagStatus">{{scope.row.status|goodsStatus}}</el-tag>
        </template>
      </el-table-column>
      <el-table-column prop="stock" align="center" label="库存" width="90" sortable>
        <template slot-scope="scope">
          <span>{{scope.row.stock}}</span>
        </template>
      </el-table-column>

    </el-table>
    <div class="pagination-container">
      <el-pagination background @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page.sync="params.pageNo"
        :page-sizes="[10,20,30,50]" :page-size="params.pageSize" layout="total, sizes, prev, pager, next, jumper" :total="total">
      </el-pagination>
    </div>
  </div>
</template>
<script>
import categoryCascaderVue from './categoryCascader.vue'
import { paymentTypes } from '../config/constants'

export default {
  components: {
    'category-cascader': categoryCascaderVue
  },
  props: {
    themeId: {
      default: 0
    },
    autoLoad: {
      type: Boolean,
      default: true
    },
    selectStock: { // 选择库存
      type: Number,
      default: 0
    },
    queryType: {
      type: Number,
      default: 0
    }
  },
  data () {
    return {
      hasNewGoodRules: false,
      selectedItemIds: [],
      uillUpdateImg: false,
      isAddingRule: false,
      paymentTypes: paymentTypes,
      total: 0,
      params: {
        pageNo: 1,
        pageSize: 10
      },
      goodsTagItems: [],

      temp: {
        id: '',
        imgSrcs: '',
        cover: '',
        categoryId: '',
        typeId: '',
        title: '',
        intro: '',
        categoryPath: '',
        shopNo: '',
        goodsUnit: '',
        tagIds: '',
        status: '',
        freightTemplateId: '',
        marketPrice: '',
        price: 0,
        points: '',
        goodsRule: '',
        goodsNo: '',
        stock: '',
        alertStock: '',
        content: '',
        brandId: ''
      }
    }
  },

  created () {
    this.params.id = this.themeId
    if (this.autoLoad) {
      this.handleFilter()
    }
  },
  methods: {
    handleSizeChange (pageSize) {
      this.page.pageSize = pageSize
      this.handleFilter()
    },
    handleCurrentChange (page) {
      this.params.pageNo = page
      this.handleFilter()
    },
    handleFilter () {
      let url = ''
      if (this.queryType == 2) { // for 限时抢购
        url = '/admin/goods_flash_sale/goods/list_not_relate'
      } else if (this.queryType == 1) {
        url = '/admin/goods_activity/goods/list_not_relate'
      } else if (this.queryType == 3) {
        url = '/admin/share_activity/goods/list_not_relate'
      } else {
        url = '/admin/goods_theme/goods/list_not_relate'
      }
      this.$post(url, this.params).then(data => {
        let list = data.data
        this.total = data.totalRecord
        if (this.selectStock) {
          list.forEach(el => {
            el.importStock = el.stock
          })
        }
        this.list = list
      })
    },
    saleProps (prop) {
      if (prop && prop != '{}') {
        prop = JSON.parse(prop)
        const rt = []
        for (const key in prop) {
          rt.push(key + ':' + prop[key])
        }
        return '(' + rt.join(',') + ')'
      }
      return ''
    },
    importSelected () {
      if (this.selectedItemIds.length == 0) {
        this.$message({
          message: '请选择需要导入的商品',
          type: 'warning'
        })
        return
      }
      if (this.selectStock) {
        this.$emit('on-import-selected-items', this.selectedItemIds.map(el => {
          return {
            skuId: el.id,
            stock: el.importStock
          }
        }))
      } else {
        this.$emit('on-import-selected-items', this.selectedItemIds.map(el => el.id).join(','))
      }
    },
    importAll () {
      let filterRules = this._parseFilters().getFilterRules()
      this.$emit('on-import-all', filterRules)
    },
    handleSelectionChange (evt) {
      this.selectedItemIds = []
      evt.forEach(i => {
        this.selectedItemIds.push(i)
      })
    },
    submitRuleFormAction () {
      if (this.submiting) {
        return
      }
      let data = this.$refs['goodsRule'].getData()
      this.submiting = true
      this.$post('/admin/goods/saveGoodsRule', {
        id: this.temp.id,
        goodsRule: JSON.stringify(data)
      })
        .then(_ => {
          this.ruleDialogVisible = false
          this.$$notify('操作成功')
          this.submiting = false
        })
        .catch(_ => {
          this.submiting = false
        })
    },
    showRuleDialog (row) {
      this.temp.goodsRule = row.goodsRule
      this.temp.id = row.id
      this.ruleDialogVisible = true
    },
    __onParseFilterValue (field, eq, value) {
      if (value) {
        if (field == 'goods_category.path') {
          return ',' + value.replace(/^,|,$/g, '') + ','
        }
      }
      return value
    },
    handleCommand (row, command) {
      let postData = value => {
        this.$post('/admin/goods/' + command, {
          id: row.id,
          approve_remark: value
        }).then(res => {
          if (row.audit_step == 9) {
            row.audit_step = 2
          } else {
            row.audit_step = 9
          }
          this.$$notify('操作成功')
        })
      }
      if (command == 'unAuthPassed') {
        this.$prompt('请输入审核拒绝理由', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消'
        })
          .then(({ value }) => {
            postData(value)
          })
          .catch(() => {})
      } else {
        this.$$comfirm('确定审核通过吗？', () => {
          postData()
        })
      }
    }
  }
}
</script>
<style scoped>

.avatar {
  width: 100px;
  display: block;
  margin: 0 auto;
  height: 100px;
}
.btns {
  padding-left: 15px;
}
.btns /deep/ button {
  margin-top: 10px;
  margin-bottom: 10px;
}
</style>
